<template>
	<div class="index">
		<div class="index-banner">
      <div class="swiper-container111">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="item in imglist">
            <img  v-bind:src="comimgsrc+item.img">
          </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination111 swiper-pagination-white"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>
      </div>
    </div>
    <div class="notice container">
      <div class="left"><i class="icon iconfont icon-gonggao"></i><p>通知公告</p></div>
      <div class="right">
        <div class="swiper-container4">
          <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="itemm in notice">
                {{itemm.content}}
              </div>
          </div>
        </div>
      </div>
    </div>
    <div class="floor container">
      <img class="com-bt" :src="bt1" alt="">
      <div class="xsg-box">
        <div class="list" v-for="(item,index) in xsglist">
          <div class="img">
            <img :src="comimgsrc+item.preview">
          </div>
          <div class="down">
            <div class="name">{{item.name}}</div>
            <div class="price">
              <p><span>{{item.price}}</span>/{{item.unit}} <del v-show="item.max_price">￥{{item.max_price}}/{{item.unit}}</del></p>
            </div>
            <div class="djs" style="margin: 20px 0;">
                <djs @ievent="ievent($event)" v-bind:endtime="{sj:item.deadline,starttime:item.start_time,id:index,stock:item.stock}"></djs>
              </div>
            <div to="/limit-detail" class="qg-btn" @click="qgbtn(item.id)">
              <p>抢<br>购</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="floor container">
      <img class="com-bt" :src="bt2" alt="">
      <div class="fresh-list-box">
        <div class="list" v-for="item in xghlist">
          <!-- :to="{name:'product-detail', params:{cpid: item.id}}" -->
          <router-link :to="{name:'freshDetail', query:{cpid: item.id}}" class="img"><img :src="comimgsrc+item.preview"></router-link>
          <div class="name">{{item.name}}</div>
          <div class="down-box">
            <div class="down-left">
              <div class="price">￥{{item.price}}/{{item.unit}}</div>
              <router-link :to="{name:'freshDetail', query:{cpid: item.id}}" class="buynow">
                立即购买
              </router-link>
            </div>
            <div class="add" @click="addshopcar(item.id,item.price)">
              <i class="icon iconfont icon-gouwuche"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="more">
        <div class="k">
          <router-link to="/fresh">查看更多</router-link>
        </div>
      </div>
    </div>
    <div class="mid-zhongjian">
      <router-link :to="{name:'freshDetail', query:{cpid: zhongjian.goods_id}}">
        <img :src="comimgsrc+zhongjian.img">
      </router-link>
    </div>
    <div class="floor container" style="margin-bottom: 20px;">
      <img class="com-bt" :src="bt3" alt="">
      <div class="fresh-list-box">
        <div class="list" v-for="item in tclist">
          <!-- :to="{name:'product-detail', params:{cpid: item.id}}" -->
          <router-link :to="{name:'specialtyDetail', query:{cpid: item.id}}"  class="img"><img :src="comimgsrc+item.preview"></router-link>
          <div class="name">{{item.name}}</div>
          <div class="down-box">
            <div class="down-left">
              <div class="price">￥{{item.price}}/{{item.unit}}</div>
              <router-link to="/product-detail" class="buynow" :to="{name:'specialtyDetail', query:{cpid: item.id}}">
                立即购买
              </router-link>
            </div>
            <div class="add" @click="addshopcar(item.id,item.price)">
              <i class="icon iconfont icon-gouwuche"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="more">
        <div class="k">
          <router-link to="/fresh">查看更多</router-link>
        </div>
      </div>
    </div>
	</div>
</template>
<script>
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
import ban1 from '@/assets/image/banner1.jpg';
import ban2 from '@/assets/image/banner2.jpg';
import ban3 from '@/assets/image/banner3.jpg';
import ban4 from '@/assets/image/banner4.jpg';
import ban5 from '@/assets/image/banner5.jpg';
import ban7 from '@/assets/image/banner7.jpg';
import bt1 from '@/assets/image/bt1.png';
import bt2 from '@/assets/image/bt2.png';
import bt3 from '@/assets/image/bt3.png';
import cp1 from '@/assets/image/cp1.jpg';
import cp2 from '@/assets/image/cp2.jpg';
import djs from '@/components/common/djs';
import qs from "qs"
import store from '@/vuex/store'
import djsstart from '@/components/common/djs-start';
export default {
	name: 'index',
  	data () {
  		return{
        imglist:[
          // ban1,ban2,ban3,ban4,ban5,ban7
        ],
        addshopcarnum:1,
        url: 'http://m.mountainfreshes.com/',
        bt1:bt1,
        bt2:bt2,
        bt3:bt3,
        cp1:cp1,
        cp2:cp2,
        zhongjian:{},
        sssid:'',
        comimgsrc:'http://api.mountainfreshes.com',
        // [
        //   {id:1,imgsrc:cp2,name:"香甜脆梨",price:"9.9",beforeprice:"14.9",spec:"kg",time:800,stock:200},
        //   {id:2,imgsrc:cp1,name:"三红蜜柚",price:"29.9",beforeprice:"39.9",spec:"kg",time:12010,stock:0},
        //   {id:3,imgsrc:cp2,name:"香甜脆梨",price:"9.9",beforeprice:"14.9",spec:"kg",time:0,stock:200},
        //   {id:4,imgsrc:cp1,name:"三红蜜柚",price:"29.9",beforeprice:"39.9",spec:"kg",time:401,stock:200}
        // ]

          // {id:11,imgsrc:cp2,name:"香甜脆梨",price:"9.9",spec:"kg"},
          // {id:21,imgsrc:cp1,name:"三红蜜柚",price:"29.9",spec:"kg"},
          // {id:31,imgsrc:cp2,name:"香甜脆梨",price:"9.9",spec:"kg"},
          // {id:41,imgsrc:cp1,name:"三红蜜柚",price:"29.9",spec:"kg"},
          // {id:51,imgsrc:cp1,name:"三红蜜柚",price:"29.9",spec:"kg"},
          // {id:61,imgsrc:cp2,name:"香甜脆梨",price:"9.9",spec:"kg"},
          // {id:71,imgsrc:cp1,name:"三红蜜柚",price:"29.9",spec:"kg"},
          // {id:81,imgsrc:cp1,name:"三红蜜柚",price:"29.9",spec:"kg"},
          // {id:91,imgsrc:cp2,name:"香甜脆梨",price:"9.9",spec:"kg"},
          // {id:101,imgsrc:cp1,name:"三红蜜柚",price:"29.9",spec:"kg"}


          // {id:11,imgsrc:cp2,name:"香甜脆梨",price:"9.9",spec:"kg"},
          // {id:21,imgsrc:cp1,name:"三红蜜柚",price:"29.9",spec:"kg"},
          // {id:31,imgsrc:cp2,name:"香甜脆梨",price:"9.9",spec:"kg"},
          // {id:41,imgsrc:cp1,name:"三红蜜柚",price:"29.9",spec:"kg"},
          // {id:21,imgsrc:cp1,name:"三红蜜柚",price:"29.9",spec:"kg"},
          // {id:31,imgsrc:cp2,name:"香甜脆梨",price:"9.9",spec:"kg"},
          // {id:41,imgsrc:cp1,name:"三红蜜柚",price:"29.9",spec:"kg"},
          // {id:21,imgsrc:cp1,name:"三红蜜柚",price:"29.9",spec:"kg"},
          // {id:31,imgsrc:cp2,name:"香甜脆梨",price:"9.9",spec:"kg"},
          // {id:41,imgsrc:cp1,name:"三红蜜柚",price:"29.9",spec:"kg"}
         
        
        xsglist:[],
        xghlist:[],
        tclist:[],
        notice:[
          {title:'攀枝花大芒果上市啦！！！！'},
          {title:'好吃的核桃上市了，欢迎订购！！！！'}
        ]
        
  		}
  	},
    store,
  	methods:{
      // 
      getmiddle:function(){
        
        this.$http.get("/index.php/index/index/bannerMiddle")
        .then(res => {
          console.log(res.data.rows)
          this.zhongjian = res.data.rows
        })
        .catch(error => {
          
        });
      },
      getnotice:function(){
        this.$http.get("/index.php/index/index/noticeList")
        .then(res => {
          console.log(res)
          this.notice = res.data.rows;
          console.log(this.notice)
        })
        .catch(error => {
          
        });
      },
      getimglist:function(){
        this.$http.get("/index.php/index/index/bannerTop")
        .then(res => {
          console.log(res)
          this.imglist = res.data.rows;
          console.log(this.imglist)
        })
        .catch(error => {
          
        });
      },
      ievent(ev){
        this.sssid = ev.did;
        this.xsglist[ev.did].time = 0;
      },
      ieventstart(ev){
        this.xsglist[ev.index].start_time = ev.did;
        console.log(this.xsglist[ev.index].start_time)
        // console.log(ev.did,ev.index)
      },
      zhqshopcar:function(){
              this.$http.post("/index.php/user/cart/index",qs.stringify({
              // mobile:this.tel,
              // password:this.pwd
                  user_id: this.$store.state.userid

              }))
              .then(res => {
                this.$store.state.shopcartnum = res.data.row.length
                
              })
              .catch(error => {
                alert("网络错误")
              });
            
      },
      qgbtn:function(i){
        if(this.$store.state.dlzt!=1){
          this.$confirm('你还没有登录, 不能抢购', '提示', {
            confirmButtonText: '去登录',
            cancelButtonText: '先逛逛',
            type: 'warning'
          }).then(() => {
            this.$router.push({ path: '/login' })
          }).catch(() => {
                      
          });
        }else{
          this.$router.push({ name: 'limitDetail', query:{cpid: i} })
        }
      },
      addshopcar:function(i,dj){
        if(this.$store.state.dlzt!=1){
          this.$confirm('你还没有登录, 不能加入购物车哦', '提示', {
            confirmButtonText: '去登录',
            cancelButtonText: '先逛逛',
            type: 'warning'
          }).then(() => {
            this.$router.push({ path: '/login' })
          }).catch(() => {
                      
          });
        }else{
          this.$http.post("/index.php/user/cart/add_cart_goods",qs.stringify({
          // mobile:this.tel,
          // password:this.pwd
              goods_id: i,
              user_id: this.$store.state.userid,
              quantity: this.addshopcarnum,
              price: dj

          }))
          .then(res => {
            console.log(res)
            this.zhqshopcar();
            this.$message({
                  type: 'success',
                  message: '加入购物车成功!',
                  customClass: 'com-message-tc'
                });
          })
          .catch(error => {
            alert("网络错误")
          });
        }
      },
      // _isMobile() {
      //   let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
      //   return flag;
      // }
  	},
  	components:{
      djs,djsstart
  	},
  	mounted(){
        // if(this._isMobile()){
        //   window.location.href = this.url
        // };
        var mySwiper111 = new Swiper('.swiper-container111', {
            pagination: '.swiper-pagination111',
            paginationClickable: '.swiper-pagination111',
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            spaceBetween: 30,
            effect: 'fade',
            loop: true,
            autoplay: 4000,
            observer:true,//修改swiper自己或子元素时，自动初始化swiper
            observeParents:true//修改swiper的父元素时，自动初始化swiper
        })
        var swiper4 = new Swiper('.swiper-container4', {
          paginationClickable: true,
          autoplay: 5000,
          direction: 'vertical',
          speed:600,
          observer:true,//修改swiper自己或子元素时，自动初始化swiper
          observeParents:true//修改swiper的父元素时，自动初始化swiper
        });
    },
    created(){
      
      // 首页限时抢购
      this.$http.get("/index.php/index/index/getTimeLimit")
      .then(res => {
        // console.log(res)
        this.xsglist = res.data;
        console.log(this.xsglist)
      })
      .catch(error => {
        
      });
      // 首页鲜果汇
      this.$http.get("/index.php/index/index/getFreshFruit")
      .then(res => {
        // console.log(res)
        this.xghlist = res.data;
        console.log(this.xghlist)
      })
      .catch(error => {
        
      });
      // 首页凉山特色
      this.$http.get("/index.php/index/index/getCharacteristic")
      .then(res => {
        // console.log(res)
        this.tclist = res.data;
        console.log(this.tclist)
      })
      .catch(error => {
        
      });
      this.getimglist();
      this.getnotice();
      this.getmiddle();
  }
}
</script>
<style scoped lang="less">
.index{
      width: 100%;
    height: auto;
    zoom: 1;
    overflow: hidden;
}
	.index-banner{
    width: 100%;
    .swiper-container111{
      width: 100%;
      height: 100%;
      position: relative;
    }
    .swiper-container111 .swiper-slide img{
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  .notice{
    margin-top: 10px;
    height: 54px;
    box-sizing: border-box;
    border: 1px solid #d6d6d6;
    padding: 0 20px;
    .left{
    float: left;
    width: 130px;
    height: 100%;
    text-align: left;

    i{
      font-size: 24px;
      color: #d40000;
      line-height: 52px;
      display: block;
      float: left;
    }
    p{
      font-size: 16px;
      color: #d40000;
      line-height: 52px;
      float: left;
      font-weight: bold;
      margin-left: 10px;
    }
  }
  .right{
    width: 550px;
    float: left;
    height: 100%;
    .swiper-container4{
      width: 100%;
      height: 100%;
      overflow: hidden;
      .swiper-slide{
        font-size: 16px;
        text-align: left;
        line-height: 52px;
        color: #333;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
  }
  .mid-zhongjian{
    width: 100%;
    height: auto;
    zoom: 1;
    overflow: hidden;
    margin-top: 72px;
    img{
      display: block;
      width: 100%;
    }
  }
  .floor{
    margin-top: 54px;
    .com-bt{
      display: block;
      margin: auto;
    }
    .xsg-box{
      width: 100%;
      height: 470px;
      margin-top: 58px;
      .list{
        float: left;
        width: 278px;
        height: 470px;
        margin-left: 29px;
        &:first-child{
          margin-left: 0;
        }
        .img{
          width: 100%;
          height: 240px;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .down{
          width: 100%;
          height: 230px;
          background: #eee;
          box-sizing: border-box;
          border: 1px solid #eee;
          .name{
            width: 96%;
            height: 28px;
            margin: 12px auto 0;
            font-size: 16px;
            color: #2a2a2a;
            text-align: center;
            line-height: 28px;
            overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
          }
          .price{
            width: 96%;
            height: 32px;
            margin: auto;
            p{
              font-size: 14px;
              color: #383838;
              text-align: center;
              span{
                font-size: 32px;
                color: #cf4040;
              }
              del{
                padding-left: 4px;
              }
            }
          }
          
          .qg-btn{
            display: block;
            width: 62px;
            height: 62px;
            border-radius: 100%;
            text-align: center;
            background: #f2404c;
            margin: 6px auto 0;
            cursor: pointer;
            p{
              color: #fff;
              padding-top: 10px;
            }
          }
          .active{
            background:#aba5a5;
          }
        }
      }
    }
    .more{
      width: 100%;
      height: 1px;
      border-bottom: 1px dashed #3fa33a;
      position: relative;
      margin-top: 54px;
      .k{
        width: 188px;
        height: 32px;
        background: #fff;
        position: absolute;
        margin-top: -15px;
        right: 0;
        a{
          display: block;
          width: 152px;
          height: 32px;
          text-align: center;
          line-height: 34px;
          font-size: 16px;
          color: #fff;
          background: #3fa33a;
          margin: auto;
        }
      }
    }
  } 
  .fresh-list-box{
    width: 100%;
    height: auto;
    zoom: 1;
    overflow: hidden;
    margin-top: 32px;
    .list{
      width: 234px;
      height: 298px;
      float: left;
      box-sizing:border-box;
      border: 1px solid #d0d0d0;
      margin-left: 7px;
      margin-top: 12px;
      &:nth-child(5n+1){
        margin-left: 0;
      }
      .img{
        display: block;
        width: 100%;
        height: 200px;
        img{
          width: 100%;
          height: 100%;

        }
      }
      .name{
        width: 92%;
        height: 26px;
        line-height: 26px;
        margin: 2px auto;
        font-size: 16px;
        color: #202020;
        overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
      }
      .down-box{
        width: 92%;
        height: 56px;
        margin: auto;
        .down-left{
          width: 130px;
          height: 100%;
          float: left;
          .price{
            font-size: 14px;
            color: #434343;
            width: 100%;
            height: 28px;
            line-height: 28px;
          }
          .buynow{
            display: block;
            width: 100%;
            height: 24px;
            line-height: 24px;
            font-size: 14px;
            background: #5bb756;
            color: #fff;
            text-align: center;
            margin-top: 3px;
            &:hover{
              background: #438440;
            }
          }
        }
        .add{
          width: 56px;
          height: 56px;
          cursor: pointer;
          border-box: box-sizing;
          border: 1px solid #2b6e26;
          border-radius: 100%;
          margin-right: 10px;
          float: right;
          &:hover{
            i{
              color: #438440;
            }
          }
          i{
            font-size: 38px;
            color: #2b6e26;
            font-weight: bold;
            padding-left: 7px;
            padding-top: 10px;
            float: left;
          }
        }
      }
    }
  }
</style>